<template>
    <div class="pinia">
        <h1>简单数据修改</h1>
        <div class="wrap">
            <button @click="changeConut('decrease')">-</button>
            <h1>{{ userStore.count }}</h1>
            <button @click="changeConut('add')">+</button>
        </div>
        <h1>$patch + 对象</h1>
        <div class="wrap">
            <h2>{{ userStore.name }}</h2>
            <button @click="patchObjChange">$patch + 对象修改数据</button>
            <h2>{{ userStore.count }}</h2>
        </div>

        <h1>$patch + 函数</h1>
        <div class="wrap">
            <h2>{{ userStore.name }}</h2>
            <button @click="patchFunChange">$patch + 函数修改数据</button>
            <h2>{{ userStore.count }}</h2>
        </div>

        <h1>action方式修改</h1>
        <div class="wrap">
            <h2>{{ userStore.name }}</h2>
            <button @click="actionChange">action 修改数据</button>
            <h2>{{ userStore.count }}</h2>
        </div>
        <h1>Getter获取数据</h1>
        <div class="column">
            <h2>{{ userStore.getCountBuff }}</h2>
            <br />
            <h2>{{ userStore.getCountBuff }}</h2>
            <br />
            <h2>{{ userStore.getCountBuff }}</h2>
            <br />
            <h2>{{ userStore.getCountBuff }}</h2>
            <br />
            <h2>{{ userStore.getCountBuff }}</h2>
        </div>
        <h1>store之间的相互调用</h1>
        <div class="column">
            <h2 v-for="(item, index) in userStore.getMovieList" :key="index">{{ item }}</h2>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, toRefs, reactive, computed, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '../store/user/index'

const userStore = useUserStore()
const changeConut = (sign: string) => {
    switch (sign) {
        case 'decrease':
            userStore.count = userStore.count - 1
            break
        case 'add':
            userStore.count = userStore.count + 1
            break
    }
}
// 多条数据更改 使用 $patch + 对象
const patchObjChange = () => {
    userStore.$patch({
        count: userStore.count + 2,
        name: userStore.name === '大菠萝' ? 'hello pinia' : 'coding'
    })
}
// 多条数据更改 使用 $patch + 函数
const patchFunChange = () => {
    userStore.$patch((userStore) => {
        userStore.count = userStore.count + 3
        userStore.name = userStore.name === 'coding' ? 'mac book' : '大菠萝'
    })
}
// 采用action方式去修改数据

const actionChange = () => {
    console.log(userStore)
    userStore.changeNameCount('wzy', 31)
}
</script>

<style scoped lang="less">
.pinia {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    h1 {
        text-align: center;
    }
    .wrap {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        button {
            margin: 0 20px;
        }
    }
    .column {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
}
</style>
